<template>
  <div class="fileList" v-show="fileList.length">
    <h2>附件列表（{{ fileList.length }}）</h2>
    <el-table :data="fileList" stripe style="width: 100%" size="small">
      <el-table-column prop="oldName" label="附件名称">
        <template slot-scope="{ row }">
          <span class="el-icon-paperclip"></span>
          <span class="file-name sheng"> {{ row.oldName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="attrSize" label="附件大小" width="120">
        <template slot-scope="{ row }">
          <span class="file-name sheng">
            {{ row.attrSize | fileSizeFilter }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{ row }">
          <el-button-group>
            <el-button
              class="file-look"
              type="text"
              icon="el-icon-view"
              size="mini"
              @click="handleLook(row)"
              >查看</el-button
            >
            <el-button
              class="download"
              type="text"
              icon="el-icon-download"
              size="mini"
              @click="downloadCall(row.fileId, row.oldName)"
              >下载</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <PreviewFile />
  </div>
</template>
<script>
import download from '@/mixins/download'
import Bus from '@/utils/bus.js'
export default {
  mixins: [download],
  components: {
    PreviewFile: () => import('@/components/resource/preview.vue'),
  },
  data() {
    return {}
  },
  props: ['fileList'],
  mounted() {
    this.fileList.forEach((item) => {
      if (item.hasOwnProperty('sysAttachment')) {
        this.$set(item, 'oldName', item.sysAttachment.oldName)
        this.$set(item, 'attrSize', item.sysAttachment.attrSize)
      }
    })
  },
  methods: {
    handleLook(v) {
      Bus.$emit('showPreview', v, this.fileList)
    },
  },
}
</script>
<style scoped lang="scss">
.fileList {
  // padding: 0 10px;
  h2 {
    line-height: 2;
    color: #333;
    font-size: 16px;
    text-indent: 5px;
    border-bottom: 2px solid #ddd;
  }
  .file-look {
    margin-right: 10px;
  }
}
</style>